<template>
    <div class="p-5 flex flex-col gap-5" v-loading="loading">
        <div class="flex gap-5">
            <img class="w-24 h-24 bg-emerald-300 rounded-md" :src="songInfo.picUrl" alt="">
            <div class="flex flex-col gap-5">
                <div class="text-xl font-bold">歌名：{{ songInfo.songName }}</div>
                <div class="flex gap-2 text-sm">
                    <div>
                        歌手：
                        <template v-for="item in songInfo.artists">
                            {{ item.name }}
                            <span class="mx-1" v-if="item != songInfo.artists[songInfo.artists.length - 1]">|</span>
                        </template>
                    </div>
                    <span>专辑：{{ songInfo.albumName }}</span>
                </div>
            </div>
        </div>

        <!-- 全部评论 -->
        <div class="flex flex-col gap-5">
            <!-- 发表评论 -->
            <el-badge max="none" :value="total" :offset="[5, 8]" color="rgb(255, 255, 255,0)"
                badge-style="color:black; border:none;font-weight:500;">
                <span class="text-lg font-medium mt-5 my-3"> 全部评论</span>
            </el-badge>
            <div class="top-0 py-3 sticky bg-gray-50">
                <el-input class="bg-gray-100" type="textarea" placeholder="说点什么吧" :maxlength="140" />
            </div>
            <!-- 精彩评论 -->
            <div v-if="comments.length">
                <div class="text-lg font-medium">精彩评论</div>
                <div class="flex flex-col gap-3">
                    <template v-for="item, index in comments">
                        <div v-if="index <= 20" class="flex gap-3 py-2 border-b-[1px] border-b-[#e5e5e5]"
                            :class="{ 'border-none': index === 20 || index === comments.length - 1 }">
                            <img :src="item.user.avatarUrl" class="h-12 w-12 rounded-full">
                            <div class="flex flex-col gap-2 flex-1">
                                <div class="font-medium text-blue-300 flex items-center gap-2">
                                    <span>{{ item.user.nickname }}</span>
                                    <img v-if="item.user.vipRights?.associator" class="h-4"
                                        :src="item.user.vipRights.associator.iconUrl" />
                                    <img v-if="item.user.vipRights?.redplus" class="h-4"
                                        :src="item.user.vipRights.redplus.iconUrl" />
                                </div>
                                <div class="text-sm">{{ item.content }}</div>
                                <div class="flex justify-between items-center w-full mt-5">
                                    <div class="text-gray-500 text-sm">{{ item.timeStr }}</div>

                                    <div class="px-5 flex gap-4 items-center">
                                        <div class="flex gap-1 items-center" @click="likeComment(item)">
                                            <!-- 点赞数 -->
                                            <span v-if="item.likedCount" class="text-[#999] text-sm mt-1">{{
                                                item.likedCount }}</span>
                                            <!-- 评论点赞 -->
                                            <svg t="1743840826761" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="5475" width="20" height="20">
                                                <path
                                                    d="M542.6688 85.333333c-74.325333 0-133.307733 58.026667-133.307733 133.393067 0 43.861333-37.922133 113.578667-80.093867 148.4288-30.754133 25.412267-98.013867 45.226667-200.055467 56.661333l-3.413333 0.4608a68.266667 68.266667 0 0 0-57.258667 67.328l-0.238933 374.442667-0.0512 0.256c-0.170667 1.194667-0.1024 2.269867 0.017067 3.822933l0.085333 3.413334a68.2496 68.2496 0 0 0 68.1984 64.853333l612.096 0.136533 0.341333 0.0512c0.836267 0.0512 1.6896 0.085333 2.542934 0.085334 25.463467 0 50.568533-7.168 72.430933-21.026134l4.693333-3.072a133.205333 133.205333 0 0 0 40.772267-45.2096l1.604267-3.072-1.6384 2.5088c4.642133-6.5024 8.021333-13.824 10.103466-21.6064l74.069334-326.894933 0.768-3.242667c0.9216-4.488533 1.365333-9.557333 1.2288-14.728533l-0.068267-1.092267-0.119467 2.474667a132.949333 132.949333 0 0 0-20.206933-81.271467l-2.6112-4.061866c-23.125333-34.577067-61.013333-56.081067-102.2976-59.204267l-2.679467-0.170667-1.024-0.136533a61.969067 61.969067 0 0 0-7.560533-0.4608l-145.442133-0.1024 1.8432-8.8576a393.728 393.728 0 0 0 7.185066-75.025067c0-28.501333-3.242667-56.951467-9.472-85.333333l-0.699733-2.696533a34.116267 34.116267 0 0 0-0.9216-2.628267l-0.477867-1.041067-0.682666-2.4576A133.4272 133.4272 0 0 0 542.6688 85.333333z m0 68.266667a65.160533 65.160533 0 0 1 62.5664 47.274667l1.553067 5.922133 0.6144 1.672533-0.955734-4.727466a323.703467 323.703467 0 0 1-10.120533 177.425066l-0.750933 2.389334a34.133333 34.133333 0 0 0 32.938666 42.973866L818.670933 426.666667l1.604267 0.238933 2.423467 0.187733a66.986667 66.986667 0 0 1 54.6304 31.573334 64.853333 64.853333 0 0 1 10.154666 35.84l-0.273066 6.877866 0.1024 2.525867-73.796267 325.700267-1.1264 1.7408-1.245867 2.269866a65.314133 65.314133 0 0 1-23.552 26.2656l-3.720533 2.2016a66.833067 66.833067 0 0 1-28.125867 8.192l-2.133333 0.0512-2.048-0.068266L136.533333 870.126933l0.256-378.4704c114.210133-12.782933 192.273067-35.7888 235.946667-71.867733 55.415467-45.806933 102.3488-130.594133 104.789333-195.822933l0.085334-5.239467c0-37.410133 28.16-65.1264 65.041066-65.1264z"
                                                    :fill="item.liked ? '#00ff00' : '#444444'" p-id="5476"></path>
                                                <path
                                                    d="M290.133333 580.266667v187.733333a34.133333 34.133333 0 0 1-34.133333 34.133333h-34.133333V546.133333h34.133333a34.133333 34.133333 0 0 1 34.133333 34.133334z"
                                                    :fill="item.liked ? '#00ff00' : '#00B386'" p-id="5477"></path>
                                            </svg>
                                        </div>
                                        <!-- 评论回复 -->
                                        <svg t="1743841042114" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="7373" width="24" height="24">
                                            <path
                                                d="M809.9550073 760.29572625H343.87892939L164.38571167 859.31623623V462.26603621v0.02512055V214.0449927C164.38571167 186.60722662 186.60790556 164.38571167 214.0449927 164.38571167h595.9100146C837.36697388 164.38571167 859.61428833 186.60790556 859.61428833 214.0449927V710.63576627c0 27.41196658-22.24731445 49.65928103-49.65928103 49.65928106z m0-521.42143249c0-13.70564383-11.12365723-24.82930105-24.82930106-24.82930106H238.87429376c-13.70564383 0-24.82930105 11.12365723-24.82930106 24.82930106V760.46953339l103.0676365-49.83308818h468.01307704c13.70564383 0 24.82930105-11.12365723 24.82930106-24.82930104V238.87429376z m-173.80714417 173.80714416h-347.61428833c-13.70564383 0-24.82930105-11.12365723-24.82930105-24.82930105 0-13.70632277 11.12365723-24.82997999 24.82930105-24.82997999h347.61428833c13.70632277 0 24.82997999 11.12365723 24.82997998 24.82997999 0 13.70564383-11.12365723 24.82930105-24.82997998 24.82930105zM288.5335748 512h148.97784311c13.70564383 0 24.82930105 11.12365723 24.82930106 24.82930105 0 13.70632277-11.12365723 24.82997999-24.82930106 24.82997998H288.5335748c-13.70564383 0-24.82930105-11.12365723-24.82930105-24.82997999 0-13.70564383 11.12365723-24.82930105 24.82930105-24.82930104z"
                                                fill="#363F4D" p-id="7374"></path>
                                        </svg>
                                        <!-- 分享 -->
                                        <svg t="1743841124422" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="8411" width="20" height="20">
                                            <path
                                                d="M511.998 64c21 0 38.1 17 38.1 38.1s-17 38.1-38.1 38.1c-205.4 0-371.9 166.5-371.9 371.9s166.5 371.8 371.9 371.8 371.9-166.5 371.9-371.9c0-21 17-38.1 38.1-38.1s38 17.1 38 38.1c0 247.4-200.6 448-448 448s-448-200.6-448-448 200.6-448 448-448z m230.6 190.5c-14.2-14.7-14-38 0.5-52.4 14.5-14.5 37.8-14.6 52.7-0.2l65.6 65.6c19.8 19.8 19.8 51.8 0 71.6l-65.6 65.6c-14.6 14.6-38.3 14.6-52.9 0-14.6-14.6-14.6-38.3 0-52.9l11.1-11.1h-48.3c-131.3 0-175.9 55.9-175.9 225 0 20.7-16.7 37.4-37.4 37.4s-37.4-16.7-37.4-37.4c0-209.1 76.3-299.8 250.7-299.8h48.3l-11.4-11.4z"
                                                fill="#707070" p-id="8412"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 最新评论 -->
            <div v-if="hotComments.length">
                <el-badge max="none" :value="total" :offset="[5, 8]" color="rgb(255, 255, 255,0)"
                    badge-style="color:black; border:none;font-weight:500;">
                    <span class="text-lg font-medium mt-5 my-3">最新评论</span>
                </el-badge>
                <div class="flex flex-col gap-3">
                    <div v-for="item, index in hotComments" class="flex gap-3 py-2 border-b-[1px] border-b-[#e5e5e5]"
                        :class="{ 'border-none': index === hotComments.length - 1 }">
                        <img :src="item.user.avatarUrl" class="h-12 w-12 rounded-full">
                        <div class="flex flex-col gap-2 flex-1">
                            <div class="font-medium text-blue-300 flex items-center gap-2">
                                <span>{{ item.user.nickname }}</span>
                                <img v-if="item.user.vipRights?.associator" class="h-4"
                                    :src="item.user.vipRights.associator.iconUrl" />
                                <img v-if="item.user.vipRights?.redplus" class="h-4"
                                    :src="item.user.vipRights.redplus.iconUrl" />
                            </div>
                            <div class="text-sm">{{ item.content }}</div>
                            <div class="flex justify-between items-center w-full mt-5">
                                <div class="text-gray-400 text-sm mt-5">{{ item.timeStr }}</div>
                                <div class="px-5 flex gap-4 items-center">
                                    <div class="flex gap-1 items-center" @click="likeComment(item)">
                                        <!-- 点赞数 -->
                                        <span class="text-sm mt-1"
                                            :class="item.liked ? 'text-[#1ecc94]' : 'text-[#999]'"
                                            v-if="item.likedCount">{{ item.likedCount
                                            }}</span>
                                        <!-- 评论点赞 -->
                                        <svg t="1743840826761" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="5475" width="20" height="20">
                                            <path
                                                d="M542.6688 85.333333c-74.325333 0-133.307733 58.026667-133.307733 133.393067 0 43.861333-37.922133 113.578667-80.093867 148.4288-30.754133 25.412267-98.013867 45.226667-200.055467 56.661333l-3.413333 0.4608a68.266667 68.266667 0 0 0-57.258667 67.328l-0.238933 374.442667-0.0512 0.256c-0.170667 1.194667-0.1024 2.269867 0.017067 3.822933l0.085333 3.413334a68.2496 68.2496 0 0 0 68.1984 64.853333l612.096 0.136533 0.341333 0.0512c0.836267 0.0512 1.6896 0.085333 2.542934 0.085334 25.463467 0 50.568533-7.168 72.430933-21.026134l4.693333-3.072a133.205333 133.205333 0 0 0 40.772267-45.2096l1.604267-3.072-1.6384 2.5088c4.642133-6.5024 8.021333-13.824 10.103466-21.6064l74.069334-326.894933 0.768-3.242667c0.9216-4.488533 1.365333-9.557333 1.2288-14.728533l-0.068267-1.092267-0.119467 2.474667a132.949333 132.949333 0 0 0-20.206933-81.271467l-2.6112-4.061866c-23.125333-34.577067-61.013333-56.081067-102.2976-59.204267l-2.679467-0.170667-1.024-0.136533a61.969067 61.969067 0 0 0-7.560533-0.4608l-145.442133-0.1024 1.8432-8.8576a393.728 393.728 0 0 0 7.185066-75.025067c0-28.501333-3.242667-56.951467-9.472-85.333333l-0.699733-2.696533a34.116267 34.116267 0 0 0-0.9216-2.628267l-0.477867-1.041067-0.682666-2.4576A133.4272 133.4272 0 0 0 542.6688 85.333333z m0 68.266667a65.160533 65.160533 0 0 1 62.5664 47.274667l1.553067 5.922133 0.6144 1.672533-0.955734-4.727466a323.703467 323.703467 0 0 1-10.120533 177.425066l-0.750933 2.389334a34.133333 34.133333 0 0 0 32.938666 42.973866L818.670933 426.666667l1.604267 0.238933 2.423467 0.187733a66.986667 66.986667 0 0 1 54.6304 31.573334 64.853333 64.853333 0 0 1 10.154666 35.84l-0.273066 6.877866 0.1024 2.525867-73.796267 325.700267-1.1264 1.7408-1.245867 2.269866a65.314133 65.314133 0 0 1-23.552 26.2656l-3.720533 2.2016a66.833067 66.833067 0 0 1-28.125867 8.192l-2.133333 0.0512-2.048-0.068266L136.533333 870.126933l0.256-378.4704c114.210133-12.782933 192.273067-35.7888 235.946667-71.867733 55.415467-45.806933 102.3488-130.594133 104.789333-195.822933l0.085334-5.239467c0-37.410133 28.16-65.1264 65.041066-65.1264z"
                                                :fill="item.liked ? '#00ff00' : '#444444'" p-id="5476"></path>
                                            <path
                                                d="M290.133333 580.266667v187.733333a34.133333 34.133333 0 0 1-34.133333 34.133333h-34.133333V546.133333h34.133333a34.133333 34.133333 0 0 1 34.133333 34.133334z"
                                                :fill="item.liked ? '#00ff00' : '#00B386'" p-id="5477"></path>
                                        </svg>
                                    </div>

                                    <!-- 评论回复 -->
                                    <svg t="1743841042114" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7373" width="24" height="24">
                                        <path
                                            d="M809.9550073 760.29572625H343.87892939L164.38571167 859.31623623V462.26603621v0.02512055V214.0449927C164.38571167 186.60722662 186.60790556 164.38571167 214.0449927 164.38571167h595.9100146C837.36697388 164.38571167 859.61428833 186.60790556 859.61428833 214.0449927V710.63576627c0 27.41196658-22.24731445 49.65928103-49.65928103 49.65928106z m0-521.42143249c0-13.70564383-11.12365723-24.82930105-24.82930106-24.82930106H238.87429376c-13.70564383 0-24.82930105 11.12365723-24.82930106 24.82930106V760.46953339l103.0676365-49.83308818h468.01307704c13.70564383 0 24.82930105-11.12365723 24.82930106-24.82930104V238.87429376z m-173.80714417 173.80714416h-347.61428833c-13.70564383 0-24.82930105-11.12365723-24.82930105-24.82930105 0-13.70632277 11.12365723-24.82997999 24.82930105-24.82997999h347.61428833c13.70632277 0 24.82997999 11.12365723 24.82997998 24.82997999 0 13.70564383-11.12365723 24.82930105-24.82997998 24.82930105zM288.5335748 512h148.97784311c13.70564383 0 24.82930105 11.12365723 24.82930106 24.82930105 0 13.70632277-11.12365723 24.82997999-24.82930106 24.82997998H288.5335748c-13.70564383 0-24.82930105-11.12365723-24.82930105-24.82997999 0-13.70564383 11.12365723-24.82930105 24.82930105-24.82930104z"
                                            fill="#363F4D" p-id="7374"></path>
                                    </svg>
                                    <!-- 分享 -->
                                    <svg t="1743841124422" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="8411" width="20" height="20">
                                        <path
                                            d="M511.998 64c21 0 38.1 17 38.1 38.1s-17 38.1-38.1 38.1c-205.4 0-371.9 166.5-371.9 371.9s166.5 371.8 371.9 371.8 371.9-166.5 371.9-371.9c0-21 17-38.1 38.1-38.1s38 17.1 38 38.1c0 247.4-200.6 448-448 448s-448-200.6-448-448 200.6-448 448-448z m230.6 190.5c-14.2-14.7-14-38 0.5-52.4 14.5-14.5 37.8-14.6 52.7-0.2l65.6 65.6c19.8 19.8 19.8 51.8 0 71.6l-65.6 65.6c-14.6 14.6-38.3 14.6-52.9 0-14.6-14.6-14.6-38.3 0-52.9l11.1-11.1h-48.3c-131.3 0-175.9 55.9-175.9 225 0 20.7-16.7 37.4-37.4 37.4s-37.4-16.7-37.4-37.4c0-209.1 76.3-299.8 250.7-299.8h48.3l-11.4-11.4z"
                                            fill="#707070" p-id="8412"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getSongCommentApi, likeCommentApi } from "../../api"
import { onMounted, reactive, ref, watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
const loading = ref(false)
const songId = ref(Number(route.query.id) || 0)
const comments = ref([] as any[])
const hotComments = ref([] as any[])
const total = ref(0)
const songInfo = reactive(JSON.parse(route.query.songInfo?.toString() || "{}"))

watch(
    () => route.query.id,
    () => {
        songId.value = Number(route.query.id) || 0;
        Object.assign(songInfo, JSON.parse(route.query.songInfo?.toString() || ''));
        console.log(songInfo);

        getSongComment()
    }
);
onMounted(() => {
    getSongComment()
})
const getSongComment = async () => {
    try {
        loading.value = true
        let res = await getSongCommentApi(songId.value)
        comments.value = res.comments
        hotComments.value = res.hotComments
        total.value = res.total
    } catch (error) {
        console.log(error)
    } finally {
        loading.value = false
    }
}
const likeComment = (item: any) => {
    likeCommentApi({
        id: songId.value,
        cid: item.commentId,
        t: item.liked ? 0 : 1,
        type: 0
    }).then(() => {
        getSongComment()
    })
}
</script>